<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<essay title="南京 x地发生xxxx时间" time="2024-11-29"></essay>
			<essay title="南京aaaaa "></essay>
			
			<h1>学生信息</h1>
			<table>
				<tr>
					<td>编号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="stu in stus"> 
					<student  :id="stu.id"  :name="stu.name" :age="stu.age">
					</student>
				</tr> 
				
				<tr v-for="stu in stus">
					<td>{{stu.id}}</td>
					<td>{{stu.name}}</td>
					<td>{{stu.age}}</td>
				</tr>
				
			</table>
		</div>

		<script>
			var app = Vue.createApp({
				data() {
					return {
						"message": "Hello Vue!",
						"stus": [
							{id: 101,name: '张三',age: 18,},
							{id: 102,name: '李四',age: 19,},
							{id: 102,name: '王五',age: 19,}
						]
					}
				}
			});
			app.component("essay", {
				template: "<div><h2>标题:{{title}}{{time}}</h2></div>",
				props: ["title", "time"]
			})


			app.component("student", {
				template: "<td>{{id}}</td><td>{{name}}</td><td>{{age}}</td>",
				protps: ['id', 'name', 'age']
			})

			var vm = app.mount("#app")
		</script>



	</body>
</html>